<template>
    <div class="adopt_ranking">
        <ul>
            <li v-for="(adopt_ranking,index) in ranking_sort" :key="adopt_ranking">
                <span>{{ index+1 }}</span>
                <strong>{{ adopt_ranking.name }}</strong>
                <em>{{ adopt_ranking.number }}</em>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        
        name: 'adopt_ranking',
        data() {
            return {
                adopt_ranking: []
            }
        },
        computed:{
            ranking_sort(){
                return this.adopt_ranking.sort(function(a,b){
                    if(a.number > b.number){
                        return -1;
                    }
                    if(a.number < b.number){
                        return 1;
                    }
                    return 0
                })
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/adoptRanking')
                .then(response=>{
                    this.adopt_ranking = response.data.data
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    .adopt_ranking{
		position: absolute;
		top: 365px;
		left: 1400px;
		width: 150px;
		height: 450px;
        font-size: 12px;
    }
    .adopt_ranking ul{
        list-style: none;
        line-height: 25px;
    }
    .adopt_ranking ul li{
        overflow: hidden;
    }
    .adopt_ranking ul li span{
        float: left;
        width: 50px;
        text-align: center;
        color: #FFF;
    }
    .adopt_ranking ul li strong{
        float: left;
        color: #00ffff;
        font-style: normal;
    }
    .adopt_ranking ul li em{
        float: right;
        font-style: normal;
        color: #FFF;
    }
</style>